<template>
    <div class="missionStatement">
        <el-row type="flex" justify="start">
            <el-col :span="4" :offset="1">
                <div class="grid-content bg-purple">
                    <img class="img_logo" src="static/img/总合同数.png" alt="">
                    <p class="contract">总合同数：{{assignmentManageCount}}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <img class="img_logo" src="static/img/设备.png" alt="">
                    <p class="contract">投入设备：{{intoEquipment}}</p>
                </div>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-button type="primary" @click="exportExcel">下载</el-button>
            </el-col>
        </el-row>

        <el-row class="table">
            <el-table :data="tableData" stripe border style="width: 100%" v-loading.body="loading">
                <el-table-column type="index" width="53">
                </el-table-column>
                <el-table-column prop="person.userName" label="执行人" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.contractCode" label="合同编号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.area" label="地区" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.department" label="部门" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.client" label="客户" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.terminal" label="终端" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.instrumentVersion" label="仪器型号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="assignmentManage.instrumentCode" label="仪器编码" show-overflow-tooltip>
                </el-table-column>

                <el-table-column prop="person.upToDate" :formatter="dateFormat" label="执行截止日期" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="110" align='center'>
                    <template scope="scope">
                        <el-button type="primary" size="small">
                            <span class="" v-on:click="ding"> 钉通知</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="limit" :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="count">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    name: "missionStatement",
    data() {
        return {
            assignmentManageCount: 0,//合同总数
            intoEquipment: 0, //投入设备数
            count: 0,
            skip: 0,
            limit: 10,
            tableData: [],
            loading: true
        }

    },
    methods: {
        exportExcel(){
            this.loading = true;
            this.$http.post('api/statement/exportTaskExcel').then(res => {
                if (res.data.code == 100) {
                    this.loading = false;
                    this.excel(res.data.data);
                }
            }, err => {
                this.message("未知错误", "error")
            });
        },
        excel: function(excelUrl) {
            console.log(excelUrl, 'excelUrl')
            this.$confirm('是否下载报表到本地?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'info' }).then(res => {
                window.location.href = excelUrl;
            }).catch(() => {
                this.message('取消下载', 'info');
            });
        },
        dateFormat: function(row, column, cellValue) {
            var date = row.person['upToDate'];
            if (date == undefined) {
                return "";
            }
            return moment(date - 0).format("YYYY-MM-DD");
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        ding: function() {
            let loginUser = sessionStorage.getItem('loginUser');
            let user = JSON.parse(loginUser);
            let userList = [];
            userList.push(user.userId + '')
            console.log(userList)

            this.$ddapi.post(userList).then(res => {
                console.log(res, 'res======================')
            })
        },
        initList: function() {
            this.$http.post('api/queryStatementList', {
                skip: this.skip,
                limit: this.limit
            }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.loading = false;
                    this.intoEquipment = result.count;
                    this.count = result.count;
                    this.tableData = result.data;
                }
            }, err => {

            });
        },
        querySumAssignmentManageCount: function() {//合同总数
            this.$http.post('api/querySumAssignmentManageCount').then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.assignmentManageCount = result.count;
                }
            }, err => {

            });
        },
        handleSizeChange: function(res) {
            this.limit = res;
            this.initList();
        },
        handleCurrentChange: function(res) {
            if (res == 1)
                this.skip = 0;
            else
                this.skip = (res - 1) * this.limit
            this.initList();
        }

    },
    created: function() {
        this.initList();
        this.querySumAssignmentManageCount();
    }
}
</script>
<style lang="css" scoped>
.img_logo {
  width: 2rem;
  margin-bottom: -0.5rem;
}

.contract {
  display: inline;
}

.missionStatement {
  margin: 15px 0;
}

.table {
  margin: 1.5rem 1rem;
}
</style>